<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>在线矛盾纠纷多元化解平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" />
    <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" />
    <link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="consulting.css" />
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/mobile-angular-ui.min.js"></script>
    <script src="js/mobile-angular-ui.gestures.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="app" ui-swipe-right="Ui.turnOn('uiSidebarLeft')" ui-swipe-left="Ui.turnOff('uiSidebarLeft')">
    <div class="navbar navbar-app navbar-absolute-top navbar-top-personalcenter navbar-top-consulting">
        <div class="navbar-brand navbar-brand-center navbar-brand-personalCenter " ui-yield-to="title">
            	咨询内容
        </div>
        <div class="btn-group pull-left pullLeft-personalCenter">
            <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle" style="color: #fff">
                <i class="fa fa-chevron-left"></i>
            </div>
        </div>
        <ul>
  			<li>
  				<span class="active">咨询信息</span>
  				
  			</li>
  			<li>
  				<span>纠纷详情</span>
  				
  			</li>
  			<li>
  				<span>申请人资料</span>
  				
  			</li>
  		</ul>
  	  		<img class="back_p" src="img/back_p.png"/>
     
    </div>
  
    <div class="app-body app-body-account-consulting">
        <div class="app-content">
            <ng-view class="ng-scope">
                <div class="scrollable ng-scope">
                    <div class="scrollable-content">
                        <div class="list-group text-center">
                            <!--内容-->
                            <div class="box">
				<div class="test">
					<div class="unit one active">
						<img class="back_1" src="img/back_1.png" />
						<form>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    <label for="area">
							    	<img src="img/dingwei.png" />
							    	事件地点</label>
							    <!--<input type="text" class="form-control" id="area" placeholder="杭州西湖区">
							 	-->
							 	<select class="form-control">
							 		<option>浙江</option>
							 		<option>杭州</option>
							 	</select>
							 </div>
							 <div class="form-group col-xs-offset-1 col-xs-10"">
							    <label for="area">
							    	<img src='img/3.png' />
							    	纠纷类型
							    </label>
							   <!--
							    <input type='text" class="form-control" id="area" placeholder="">
							  	-->
							  	<select class="form-control">
							  		<option>消费权益</option>
							  		<option>离婚纠纷</option>
							  	</select>
							 </div>
							  <div class="form-group col-xs-offset-1 col-xs-10"">
							    <label for="area">
							    	<img src='img/2.png' />
							    	咨询类型</label>
							   <!-- <input type='text" class="form-control" id="area" placeholder="">
							  	-->
							  	<select class="form-control">
							  		<option>请选择咨询类型</option>
							  	</select>
							  </div>
						</form>
						
					</div>
					<!--22 -->
					<div class="unit two right">
						<img class="back_1" src="img/back_1.png" />
						<form>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    <label for="area">
							    	<img src="img/tt.png" />
							    	纠纷详情</label>
							    <textarea class="form-control details">
							    	我买了一台官方笔记本电脑...
							  	</textarea>
							 </div>
							 <div class="form-group col-xs-offset-1 col-xs-10"">
							    <label for="area">
							    	<img src="img/tt.png" />
							    	问题描述</label>
							    <textarea class="form-control problem" >
							    	他们耍无赖不把钱退给我
							    </textarea>
							  </div>
							
						</form>
						
					</div>
					<div class="unit three">
						<img class="back_1" src="img/back_1.png" />
						<form>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    <label for="">
							    	<img src="img/tt.png" />
							    	上传图片</label>
							    <input type="file" class="form-control"/>
							    <div style="font-size: 12px;">（仅限PDF/WORD/EXCEL/IMAGE/ZIP等格式，文本大小10M以内）</div>
							 </div>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							 <label class="radio-inline">
								  <input type="radio"  value="个人">个人
								</label>
								<label class="radio-inline">
								  <input type="radio"  value="法人代表">法人代表
								</label>
							</div>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    
							    <input type="text" class="form-control" placeholder="申请人姓名"/>
							   </br>
							     <input type="text" class="form-control" placeholder="电话"/>
							      </br>
							      <input type="text" class="form-control" placeholder="邮箱"/>
							 </div>
							
						</form>
						
					</div>
					<div class="unit four">
						<img class="back_1" src="img/back_1.png" />
						<form>
							
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    <label for="">
							    	<img src="img/tt.png" />上传证据</label>
							    <div class="consulting-evidence">
							    	<ul>
							    		<li>
							    			<img src="img/jt.png" />
							    			<div>对话截图</div>
							    		</li>
							    		<li>
							    			<img src="img/jt.png" />
							    			<div>对话录音</div>
							    		</li>
							    		<li>
							    			<img src="img/jt.png" />
							    			<div>证据文档</div>
							    		</li>
							    	</ul>
							    	<img class="j_left" src="img/j_left.png" />
							    	<img class="j_right" src="img/j_right.png" />
							    </div>
							  </div>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    
							    <div class="form-control" style="text-align: center;">
							    	已完成80%
							    	<div style="position: absolute;
									    left: 0px;
									    top: 12px;
									    width: 80%;
									    bottom: 12px;
									    background: #f1f6fd;
									    opacity: 0.6;
									    border-radius: 3px;
							    		"></div>
							    		<img style="    width: 18px;
											    position: absolute;
											    top: 4px;
											    right: -8px;"
											    so src="img/x.png"/>
							    </div>
							 </div>
							
							 <div class="form-group col-xs-offset-1 col-xs-10">
							 	<label class="radio-inline">
								  <input type="radio"  value="个人">个人
								</label>
								<label class="radio-inline">
								  <input type="radio"  value="法人代表">法人代表
								</label>
							</div>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    
							    <input type="text" class="form-control" placeholder="申请人姓名"/>
							   </br>
							     <input type="text" class="form-control" placeholder="电话"/>
							      </br>
							      <input type="text" class="form-control" placeholder="邮箱"/>
							 </div>
						</form>
					</div>
					
				</div>
				<div class="ul">
					<!--<div class="li" id="left">11</div>-->
					
					<img class="li" onclick="toLeft()"  id="left" src="img/left.png" />
					<!--<div class="li" id="right">22</div>-->
					<img class="li" onclick="toRight()"  id="right" src="img/right.png" />
					<img class="li" src="img/dd.png"/>
				</div>
			</div>
			
                            
                             <!--内容-->
                        </div>
                    </div>
                </div>
            </ng-view>
        </div>
    </div>

</div>
<script type="text/javascript">
//	$(function(){
		
//		 $("#left").click(function(){
//		 	var active = $(".unit.active");
//	   		var pre = $('.unit.active').prev();
//	   		var clazz = pre.attr("class")
//	  		if(pre && clazz && clazz.indexOf("unit")>=0){
//	  			active.next().removeClass("right");
//	  			active.removeClass("active").addClass("right");
//	  			active.prev().removeClass("left").addClass("active");
//	  			active.prev().prev().addClass("left");
//	  			
//	  			
//	  		}
//	  	});
	  	function toLeft(){
	  		var active = $(".unit.active");
	   		var pre = $('.unit.active').prev();
	   		var clazz = pre.attr("class")
	  		if(pre && clazz && clazz.indexOf("unit")>=0){
	  			active.next().removeClass("right");
	  			active.removeClass("active").addClass("right");
	  			active.prev().removeClass("left").addClass("active");
	  			active.prev().prev().addClass("left");
	  		}else{
	  			
	  		}
	  	}
	  	
//	  	$("#right").click(function(){
//	  		var active = $('.unit.active');
//	  	 	var next = $('.unit.active').next();
//	  	 	var clazz = next.attr("class");
//	  	 	console.log(active.text())
//	  	 	if (next && clazz && clazz.indexOf("unit")>=0) {
//	  	 		active.prev().removeClass("left");
//	  	 		active.removeClass("active").addClass("left");
//	  	 		active.next().removeClass("right").addClass("active");
//	  	 		active.next().next().addClass("right");
//	  	 	} 
//	  	})
	
		function toRight(){
			var active = $('.unit.active');
	  	 	var next = $('.unit.active').next();
	  	 	var clazz = next.attr("class");
	  	 	console.log(active.text())
	  	 	if (next && clazz && clazz.indexOf("unit")>=0) {
	  	 		active.prev().removeClass("left");
	  	 		active.removeClass("active").addClass("left");
	  	 		active.next().removeClass("right").addClass("active");
	  	 		active.next().next().addClass("right");
	  	 	} 
		}
		
//	});
	
</script>
</body>
</html>